﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DummyWebProject._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .dropCue
        {
            display: block;
            border: dashed 3px #CFCFCF;
            background: white;
        }
        span
        {
            margin: 5px;
        }
        span.moveable, span.fixed
        {
            border: solid 1px blue;
            background-color: #AAAAFF;
            display: block;
        }
        span.fixed
        {
            background-color: #4444FF;
        }
        
        .hovered
        {
        	background:red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/jquery-1.3.2.min.js" />
                <asp:ScriptReference Path="~/jquery-ui-1.7.1.custom.min.js" />
            </Scripts>
        </asp:ScriptManager>
        <table width="100%">
            <tr id="tabs">
                <td>
                    tab1
                </td>
                <td>
                    tab2
                </td>
                <td>
                    tab3
                </td>
                <td>
                    tab4
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Panel ID="dndPanel1" runat="server" CssClass="widgets">
                        <asp:Label ID="Label1" runat="server" CssClass="moveable" Text="a" />
                        <asp:Label ID="Label2" runat="server" CssClass="moveable" Text="b" />
                        <asp:Label ID="Label4" runat="server" CssClass="fixed" Text="1" />
                        <asp:Label ID="Label5" runat="server" CssClass="fixed" Text="2" />
                        <asp:Label ID="Label6" runat="server" CssClass="moveable" Text="c" />
                        <asp:Label ID="Label3" runat="server" CssClass="fixed" Text="3" />
                    </asp:Panel>
                </td>
                <td>
                    <asp:Panel ID="dndPanel2" runat="server" CssClass="widgets">
                        <asp:Label ID="Label9" runat="server" CssClass="fixed" Text="1" />
                        <asp:Label ID="Label10" runat="server" CssClass="fixed" Text="2" />
                        <asp:Label ID="Label7" runat="server" CssClass="moveable" Text="a" />
                        <asp:Label ID="Label8" runat="server" CssClass="moveable" Text="b" />
                        <asp:Label ID="Label11" runat="server" CssClass="moveable" Text="c" />
                        <asp:Label ID="Label12" runat="server" CssClass="fixed" Text="3" />
                    </asp:Panel>
                </td>
            </tr>
        </table>
        <jQuery:SortableExtender runat="server" DropPlaceHolderCssClass="dropCue" TargetControlSelector="$dndPanel1"
            ItemSelector=".moveable" ConnectSelector=".widgets" CursorAt="{ top:0, left:10 }">
            <OnStart>
                function(event, ui)
                {
                    ui.placeholder.height(ui.item.height());
                }
            </OnStart>
        </jQuery:SortableExtender>
        <jQuery:SortableExtender ID="DragDropjQueryExtender1" runat="server" DropPlaceHolderCssClass="dropCue"
            TargetControlSelector="$dndPanel2" ItemSelector=".moveable" ConnectSelector=".widgets"
            ForcePlaceHolderSize="true" CursorAt="{ top:0, left:10 }" />
        <jQuery:DroppableExtender runat="server" TargetControlSelector="#tabs td" AcceptSelector=".moveable" HoverCssClass="hovered">
            <OnDrop>
                function(ev,ui)
                {
                    $(ui.draggable).hide();
                }
            </OnDrop>
        </jQuery:DroppableExtender>
    </div>
    </form>
</body>
</html>
